<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
    <title>下拉刷新&上拉加载更多</title>
</head>

<body>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    #container {
        position: absolute;
        top: 44px;
        bottom: 0;
        overflow: hidden;
        width: 100%;
    }

    #scroller {
        position: absolute;
        width: 100%;
        padding:0 10px;
    }

    li {
        list-style: none;
        line-height: 50px;
        border-bottom: 1px solid #999;
    }

    li .name {
        color: red;
    }
    .flip{
    	width: 100%;
    	height: 50px;
    	text-align: center;
    	line-height: 50px;
    }
    .header{
        width: 100%;
        height: 44px;
        background-color: red;
        position: absolute;
        top: 0;
        color: #fff;
        line-height: 44px;
        font-size: 18px;
        padding-left: 10px;
    }
    </style>
    <div class="header" onclick="window.history.back()">返回</div>
    <div id="container">
        <div id="scroller">
            <div class="flip pulldown">
                <label>下拉刷新</label>
            </div>
            <ul></ul>
            <div class="flip pullup">
                <label>上拉加载更多</label>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="iscroll-probe-5.1.1.js"></script>
    <script type="text/javascript">

    var myscroll;
    var pullDown;
    var pullUp;
    $(function() {
    	initIscroll();
    	loadData();
    });

    function initIscroll() {
        if (!myscroll) {
            //init for iscroll5
            myscroll = new IScroll($('#container')[0], {
                mouseWheel: true,
                click: true,
                probeType: 2,//2，3
                isPullToRefresh: true
            });

            pullDown = $('.pulldown');
            pullUp = $('.pullup');

            //this.directionY用于判断滑动方向  0原地，-1向下，1向上滑（注意是滑动方向）
            myscroll.on('scroll', function() {
            	if(this.y < 10){
            		pullDown.find('label').text('下拉刷新');
            	}else if(this.y >= 10 && this.y <= 30){
            		pullDown.addClass('withPullDown').find('label').text('释放刷新');
            	}

            	if(Math.abs(this.y - this.maxScrollY) <= 60 && this.directionY== 1){
            		pullUp.addClass('withPullUp').find('label').text('加载中');
            	}
                console.log(this.y)
            });

            myscroll.on('scrollEnd', function() {
            	if(pullDown.hasClass('withPullDown')){
            		onPullDown();
            	}

            	if(pullUp.hasClass('withPullUp')){
            		onPullUp();
            	}
            });
        }
    }

    function refreshIScroll() {
        if (myscroll) {
            myscroll.refresh();
        } else {
            initIscroll();
        }
    }

    /**
     * 加载数据
     * @Author     lijianbo
     * @param      {Boolean}                isReload [用于区分下拉刷新和上拉加载更多，下拉刷新则为重新加载数据]
     * @param      {Function}               callback [回调函数]
     */
    function loadData(isReload,callback) {
        $.ajax({
            url: 'data.json',
            type: 'get',
            dataType: 'json',
            beforeSend: function(){
            	pullDown.find('label').text('加载中...');
            	pullUp.find('label').text('加载中...');
            },
            success: function(response) {
                if (response && response.result == 0) {
                    uiView(response.data,isReload);
                }
            },
            complete: function() {
                if (callback) callback();
                refreshIScroll();
            }
        });
    }

    function uiView(data, isReload) {
        if (!data || (data && !data.length)) return;
        var html = "";
        $.each(data, function(index, elem) {
            html += addItem(elem);
        });

        if(isReload){
        	$('#scroller ul').empty().append(html);
        }else{
			$('#scroller ul').append(html);
        }
    }

    function addItem(elem) {
        return "<li><span class='name'>" + elem.name + "</span>:" + elem.desc + "</li>";
    }


    function onPullUp() {
    	console.log('onPullUp...');
    	loadData(false,function(){
    		pullDown.removeClass('withPullUp').find('label').text('上拉加载更多');
    	});
    }

    function onPullDown() {
    	// console.log('onPullDown...');
    	loadData(true,function(){
    		pullDown.removeClass('withPullDown').find('label').text('下拉刷新');
    	});
    }
    </script>
</body>

</html>
